<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="dv">

    </div>

    <script>
        function renderElement() {
            console.time('timeStart');

            let dv = document.getElementById('dv');
            for (let i = 0; i < 100000; i++) {
                let div = document.createElement('div');
                div.innerHTML = 'Hello World';
                dv.appendChild(div);
            }

            console.timeEnd('timeStart');

        }


        // 浏览器会尽可能的将所有的脚本执行完毕，如果执行耗时很长，可能会被终止执行，因为还有其他更高优先级的任务需要执行

        const handle = window.requestIdleCallback((e) => {
            console.log(e);
            // 剩余时间
            console.log(e.timeRemaining());
            const time = e.timeRemaining();
            if (time > 0) {
                // 还有时间，继续执行
                // 如果剩余时间为0或负数，表明浏览器将结束当前空闲周期
                // 可以在这里决定是否需要重新请求一个新的空闲周期
                renderElement();
            } else {
                // 考虑重新开启一个··requestIdleCallback
            }
        })

        // window.cancelIdleCallback(handle); // 取消
    </script>
</body>

</html>